<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap-table.min.js"></script>
    <script src="../../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>

<table id="table1">

</table>

<div class="modal fade" id="staticBackdrop1" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel1">查看</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container"
                     style="padding-bottom:20px ;box-shadow: rgba(144,146,154,0.46) 5px 5px; background-color: whitesmoke;margin-top: 50px;text-align: center">
                    <div>
                        <h2>生产计划单</h2>
                    </div>
                    <div class="">
                        <form>
                            <div class="form-row">
                                <div class="col">
                                    计划单编号： <input id="applyId" type="text" class="form-control" readonly>
                                </div>
                            </div>
                            <div>
                                <table id="table5" style="width: 100%; margin-top: 20px">
                                    <thead>
                                    <tr style="background-color: #a4efef;">
                                        <th>产品编号</th>
                                        <th>产品名称</th>
                                        <th>描述</th>
                                        <th>数量</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>

                            </div>
                            <div class="form-row">
                                <div class="col">
                                    审核人： <input type="text" class="form-control" id="auditor" readonly>
                                </div>
                                <div class="col">
                                    审核时间:
                                    <input type="text" id="auditTime" class="form-control" readonly>
                                </div>
                            </div>
                        </form>
                        <div style="margin: 0px 20px">
                            备注：
                            <textarea class="form-control" id="remark1" readonly></textarea>
                        </div>
                        <div>审核状态：<span id="checkTag"></span></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#table1").bootstrapTable({
            method: "post",
            contentType: "application/json",
            striped: true,
            pageNumber: 1,
            pageSize: 3,
            pagination: true,
            sidePagination: 'server',
            pageList: [1, 3, 5, 6, 10],
            url: "/ProductionQuery/queryProduction",
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit
                }
            },
            columns: [
                {title: '生产计划编号', field: 'applyId', align: 'center',
                formatter:function (value, row, index){
                    return "<button class='btn' data-toggle=\"modal\"  data-target=\"#staticBackdrop1\" onclick='queryMapply1("+value+")' >"+value+"</button>"
                }},
                {title: '登记人', field: 'register', align: 'center'},
                {title: '登记时间', field: "registerTime", align: 'center'},
                {title: '备注', field: "remark", align: 'center'},
                {title: "审核", field: "checkTag",
                    formatter: function (value, row, index) {
                        if (value=="s001-0"){
                            return "<span style='color: orange'>等待审核</span>";
                        }else if (value=="s001-1"){
                            return "<span style='color: lightseagreen'>审核通过</span>";
                        }else{
                            return "<span style='color: red'>审核不通过</span>";
                        }
                    }
                }
            ]
        })
    })

    function queryMapply1(id){
        $.ajax({
            type: "post",
            data: "id=" + id,
            url: "/ProductionAudit/showAuditMApply",
            success: function (data) {
                $("#applyId").val(data[0].applyId);
                $("#registrant1").val(data[0].register);
                $("#auditTime").val(data[0].checkTime);
                $("#auditor").val(data[0].checker);
                $("#remark1").val(data[0].remark);
                 $("#checkTag").text((data[0].checkTag=='s001-0'?'等待审核':(data[0].checkTag=='s001-1'?'审核通过':'审核不通过')));
                $("#table5 tbody").html("");
                for (let i = 0; i < data.length; i++) {
                    $("#table5 tbody").append("<tr>" +
                        "<td>" + data[i].productId + "</td>" +
                        "<td>" + data[i].productName + "</td>" +
                        "<td>" + data[i].productDescribe + "</td>" +
                        "<td>" + data[i].amount + "</td>" +
                        "</tr>")
                }
            }
        })
    }
</script>
</body>
</html>